<template>
  <button class="square" @click="onClick">{{ innerValue }}</button>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { ISquareCheck } from "@/controler/SquareCheck/ISquareCheck";
import { TicTacTocSquareCheck } from "@/controler/SquareCheck/TicTacTocSquareCheck";

@Component({})
export default class Square extends Vue {
  // region Prop
  @Prop({ default: "??" }) value: string;
  // endregion
  // region Data
  innerValue = "";
  suareCheck: ISquareCheck = new TicTacTocSquareCheck();
  // endregion
  // region computed
  // endregion
  // region watch
  @Watch("value", { immediate: true })
  onValueChange() {
    this.innerValue = this.value;
  }
  // endregion
  // region method
  onClick() {
    if (this.suareCheck.Check(this.innerValue)) {
      return;
    }

    this.$emit("click");
  }
  // endregion
  // region hook
  // endregion
}
</script>

<style lang="scss"></style>
